<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
					padding: 0;
					margin: 0;
				}
				li{
					list-style: none;
				}
				a{
					text-decoration: none;
				}
				img{
					vertical-align: top;
					border:0;
				}
				input{
					outline: none;
				}
			.header,.nav,.code{width:375px;background:#3F454F;}
			.header{height:158px;font-size: 15px;}
			.nav ul{height:42px;display: flex;justify-content: space-between;padding:0 16px;
			box-sizing: border-box;align-items: center;}
			.nav li{display:inline-flex;align-items: center;color: white;}
			.nav li:nth-child(1) img{width:19px;height:20px;margin-right: 11px;}
			.nav li:nth-child(2) img{margin-left: 20px;}
			.nav li:nth-child(2) img:nth-child(1){width:23px;height:20px;}
			.nav li:nth-child(2) img:nth-child(2){width:18px;height:20px;}
			.nav li:nth-child(2) img:nth-child(3){width:18px;height:20px;}
			.code{height: 116px;}
			.code ul{display:flex;justify-content: space-around;align-items: center;height: 116px;}
			.code ul li{text-align: center;color: white;}
			.code ul li img{width: 35px;height: 40px;}
			.code ul li:nth-child(3){position:relative;}
			.code ul li:nth-child(3) div{width:15px;height:15px;border-radius: 50%;background: #ff6060;font-size:9px;
			position:absolute;right:-2px;top:-2px;text-align: center;line-height: 15px;}
			.main,.main2{width: 375px;font-size: 13px;}
			.main ul,.main2 ul{display: flex;flex-wrap: wrap;}
			.main ul li,.main2 ul li{width:25%;border-right: 1px solid #e6e6e6;text-align: center;
			  border-bottom: 1px solid #e6e6e6;box-sizing: border-box;}
			.main img{width:25px;height:26px;margin-bottom: 12px;margin-top: 23px;}
			.main p{margin-bottom: 18px;}
			.banner{background:#f5f5f9;height:107px;display:flex;align-items: center;width: 375px;}
			.banner ul{display: flex;justify-content: space-around;height: 85px;background: white;align-items:flex-end;
			  box-sizing: content-box;border-bottom: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;width: 100%;}
			.banner img{width:107px;height:81px;display: block;}
			.banner ul li:nth-child(2){align-self: center;text-align: right;}
			.banner ul li:nth-child(2) h2{font-size: 18px;}
			.banner ul li:nth-child(2) h3{font-size: 13px;font-weight: 100;color:#b9bec4;}
			.footer{width: 375px;height:50px;position:fixed;bottom:0;left: 0;background: white;border-top:1px solid #E6E6E6;}
			.footer ul{display:flex;justify-content: space-around;align-items: center;margin-top: 7px;}
			.footer ul img{width:22px;height:22px;}
			.footer ul li{text-align: center;color:#808080;font-size: 9px;width: 25%;position:relative;}
			.footer ul li:nth-child(2) .circle{width:8px;height:8px;background:#ff3737;border-radius:50%;
			    position: absolute;left: 53px;bottom: 33px;}
			.footer ul li:nth-child(3) .py{width:14px;height:14px;border-radius:50%;color:white;
			position: absolute;left: 50px;bottom: 29px;background:#ff3737;font-size:9px;text-align: center;line-height: 13px;}
			.main2 img{margin-bottom:0px;width:25px;height:26px;margin-bottom: 10px;margin-top: 23px;}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="header">
				<div class="nav">
					<ul>
						<li><img src="img/pic2_03.jpg"/>账单</li>
						<li><img src="img/pic2_05.jpg"/><img src="img/pic2_07.jpg"/><img src="img/pic2_09.jpg"/></li>
					</ul>
				</div>
				<div class="code">
					<ul>
						<li>
							<img src="img/pic2_16.jpg"/>
						    <p>扫一扫</p>
						</li>
						<li>
							<img src="img/pic2_18.jpg"/>
						    <p>付款</p>
						</li>
						<li>
							<img src="img/pic2_20.jpg"/>
						    <p>卡券</p>
						    <div>新</div>
						</li>
						<li>
							<img src="img/pic2_22.jpg"/>
						    <p>咻一咻</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="main">
				<ul>
					<li>
						<img src="img/pic2_29.jpg"/>
						<p>转账</p>
					</li>
					<li>
						<img src="img/pic2_32.jpg"/>
						<p>红包</p>
					</li>
					<li>
						<img src="img/pic2_35.jpg"/>
						<p>余额宝</p>
					</li>
					<li>
						<img src="img/pic2_37.jpg"/>
						<p>手机充值</p>
					</li>
					<li>
						<img src="img/pic2_29.jpg"/>
						<p>信用卡还款</p>
					</li>
					<li>
						<img src="img/pic2_32.jpg"/>
						<p>芝麻信用</p>
					</li>
					<li>
						<img src="img/pic2_35.jpg"/>
						<p>滴滴出行</p>
					</li>
					<li>
						<img src="img/pic2_37.jpg"/>
						<p>淘票票</p>
					</li>
					<li>
						<img src="img/pic2_29.jpg"/>
						<p>蚂蚁聚宝</p>
					</li>
					<li>
						<img src="img/pic2_32.jpg"/>
						<p>外卖</p>
					</li>
					<li>
						<img src="img/pic2_35.jpg"/>
						<p>天猫</p>
					</li>
					<li>
						<img src="img/pic2_37.jpg"/>
						<p>生活缴费</p>
					</li>
				</ul>
			</div>
			<div class="banner">
				<ul>
					<li><img src="img/pic2_43.jpg"/></li>
					<li>
						<h2><span style="color:#fd6c74;">15.8元</span>看大片</h2>
						<h3>秋末 佳片有约</h3>
					</li>
				</ul>
			</div>
			<div class="main2">
				<ul>
					<li>
						<img src="img/pic2_29.jpg"/>
						<p>天猫</p>
					</li>
					<li>
						<img src="img/pic2_32.jpg"/>
						<p>天猫</p>
					</li>
					<li>
						<img src="img/pic2_35.jpg"/>
						<p>天猫</p>
					</li>
					<li>
						<img src="img/pic2_37.jpg"/>
						<p>天猫</p>
					</li>
				</ul>
				<div class="footer">
				<ul>
					<li>
						<img src="img/pic2-恢复的_03.jpg"/>
						<p>支付宝</p>
					</li>
					<li>
						<img src="img/pic2-恢复的_05.jpg"/>
						<p>支付宝</p>
					</li>
					<li>
						<img src="img/pic2-恢复的_07.jpg"/>
						<p>支付宝</p>
					</li>
					<li>
						<img src="img/pic2-恢复的_09.jpg"/>
						<p>支付宝</p>
					</li>
				</ul>
			</div>
			</div>
			<div class="footer">
				<ul>
					<li>
						<img src="img/pic2-恢复的_03.jpg"/>
						<p>支付宝</p>
					</li>
					<li>
						<img src="img/pic2-恢复的_05.jpg"/>
						<p>口碑</p>
						<div class="circle"></div>
					</li>
					<li>
						<img src="img/pic2-恢复的_07.jpg"/>
						<p>朋友</p>
						<div class="py">2</div>
					</li>
					<li>
						<img src="img/pic2-恢复的_09.jpg"/>
						<p>我的</p>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
